<template>
	<slot :controller="controller" :store="store" :model="model">
		<AppForm
			ref="editForm"
			v-bind="$attrs"
			:id="controlID"
			:name="model.codeName"
			:class="classNames"
			:data="store.data"
		>
			<AppAnchor
				v-if="store.anchorData.length > 0"
				:controlID="controlID"
				:anchorData="store.anchorData"
			/>
			<div class="control-content app-control-form__content">
				<AppRow :layoutOpts="{ selfLayout: 'TABLE_24COL' }">
					<AppCol
						noRoot
						:visible="store.detailModel.user2name.visible"
						:layoutOpts="{ parentLayout: 'TABLE_24COL', colMD: 24 }"
					>
						<template v-slot:default="{ slotStyle, slotClass }">
							<slot
								name="user2name"
								:controller="controller"
								:store="store"
								:model="model"
								:slotClass="slotClass"
								:slotStyle="slotStyle"
								:actions="{ handleComponentAction }"
							>
								<AppFormItem
									name="user2name"
									:slotStyle="slotStyle"
									:slotClass="slotClass"
									:label="$t('DEF.LNAME.USER2NAME', '用户2名称')"
									labelPos="LEFT"
									:labelWidth="130"
									:showLabel="true"
									:enableAnchor="false"
									:rules="store.detailModel.user2name.valueRule"
									:emptyCaption="false"
								>
									<div class="form-editor-container">
										<slot
											name="user2nameEditor"
											:controller="controller"
											:store="store"
											:model="model"
											:actions="{ handleComponentAction }"
										>
											<AppInput
												v-bind="{ editorType: 'TEXTBOX' }"
												type="text"
												style=""
												name="user2name"
												:isDebounce="false"
												:disabled="store.detailModel.user2name.disabled"
												:value="store.data.user2name"
												@component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
											/>
										</slot>
									</div>
								</AppFormItem>
							</slot>
						</template>
					</AppCol>
					<AppCol
						noRoot
						:visible="store.detailModel.pwd.visible"
						:layoutOpts="{ parentLayout: 'TABLE_24COL', colMD: 24 }"
					>
						<template v-slot:default="{ slotStyle, slotClass }">
							<slot
								name="pwd"
								:controller="controller"
								:store="store"
								:model="model"
								:slotClass="slotClass"
								:slotStyle="slotStyle"
								:actions="{ handleComponentAction }"
							>
								<AppFormItem
									name="pwd"
									:slotStyle="slotStyle"
									:slotClass="slotClass"
									label="密码"
									labelPos="LEFT"
									:labelWidth="130"
									:showLabel="true"
									:enableAnchor="false"
									:rules="store.detailModel.pwd.valueRule"
									:emptyCaption="false"
								>
									<div class="form-editor-container">
										<slot
											name="pwdEditor"
											:controller="controller"
											:store="store"
											:model="model"
											:actions="{ handleComponentAction }"
										>
											<AppInput
												v-bind="{ editorType: 'PASSWORD' }"
												type="password"
												style=""
												name="pwd"
												:isDebounce="false"
												:disabled="store.detailModel.pwd.disabled"
												:value="store.data.pwd"
												@component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
											/>
										</slot>
									</div>
								</AppFormItem>
							</slot>
						</template>
					</AppCol>
				</AppRow>
			</div>
		</AppForm>
	</slot>
</template>
<script setup lang="ts">
// 基于template/src/widgets/{{appEntities}}/{{ctrls@FORM}}-form/{{spinalCase ctrl.codeName}}-form-base.vue.hbs生成

import { Ref } from 'vue';
import { AppAnchor } from '@components/common/anchor';
import { AppCol } from '@/components/common/col';
import { AppRow } from '@/components/common/row';
import {
	AppForm,
	AppFormPage,
	AppFormGroup,
	AppFormTabPage,
	AppFormItem,
	AppFormButton,
	AppFormDruipart,
	AppFormIframe,
	AppFormRaw,
	AppFormMdCtrl,
	AppFormMdCtrlRepeater,
} from '@components/widgets/form';
import {
	IEvent,
	EditFormActionType,
	IEditFormAbility,
	IEditFormStore,
	IParam,
} from '@/core';
import {
	useProps,
	useBasic,
	useAction,
	useController,
} from './usr-edit-view-form-form-hook';

const editForm: Ref = ref(null);

// 输入参数
const props = defineProps(useProps());

// 基础数据
const {
	controlID,
	getClassNames,
	model,
	useNavParamsBind,
	useEventBind,
	handleActionClick,
	handleComponentAction,
} = useBasic(props);

const emit = defineEmits<{
	(
		event: 'ctrl-action',
		name: string,
		action: EditFormActionType,
		data: IParam[]
	): void;
	(event: 'ctrl-init', name: string, data: IEditFormAbility): void;
	(event: 'ctrl-destroy', name: string, data: IParam): void;
}>();

const evt = useEventBind(emit);
//  部件样式名
const classNames = computed(() => {
	return getClassNames(props);
});

//  表单控制器
const controller = useController(props, evt, { controlID, editForm });

useNavParamsBind(controller, props);

const store: IEditFormStore = controller.getStore();

const ctrlService = controller.getCtrlService();

onMounted(() => {
	controller.ctrlMounted();
});
onUnmounted(() => {
	controller.ctrlDestroy();
});
</script>
